<template>
  <div id="index">
    <div ref="appRef" style="width: 1694px">
      <div class="bg">
        <dv-loading v-show="loading">Loading...</dv-loading>
        <div class="host-body">
          <div>
            <!-- 顶部title部分 -->
            <el-row>
              <el-col :span="6"><dv-decoration-8 class="title_right" :color="['#008CFF', '#00ADDD']" /></el-col>
              <el-col :span="12">
                <div class="title_text">数 据 安 全 管 理</div>
                <dv-decoration-5 class="title_center" :color="['#008CFF', '#00ADDD']" />
              </el-col>
              <el-col :span="6">
                <div class="title_time">
                  {{ dateYear + dateWeek + dateDay }}
                </div>
                <dv-decoration-8 :reverse="true" class="title_left" :color="['#008CFF', '#00ADDD']" />
              </el-col>
            </el-row>
            <!-- 主体部分 -->
            <el-row>
              <!-- 第一列 -->
              <el-col :span="6">
                <!-- 饼图部分 -->
                <div class="left_box1">
                  <dv-border-box-12>
                    <div id="Rose_diagram"></div>
                  </dv-border-box-12>
                </div>
                <!-- 柱状图部分 -->
                <div class="left_box2">
                  <dv-border-box-12 style="padding-top: 10px">
                    <div id="columnar"></div>
                  </dv-border-box-12>
                </div>
                <!-- 轮播表格部分 -->
                <div class="left_box3">
                  <dv-border-box-12 style="padding-top: 10px">
                    <dv-scroll-board :config="board_info" class="carousel_list" oddRowBGC="#fff" />
                  </dv-border-box-12>
                </div>
              </el-col>
              <!-- 第二列 -->
              <el-col :span="12">
                <!-- 柱状图 -->
                <div id="china-map">
                  <!-- 上方柱状图 -->
                  <div id="up"></div>
                  <!-- 下方柱状图 -->
                  <div id="down"></div>
                </div>
                <!-- 折线图 -->
                <div class="line_center">
                  <dv-border-box-8>
                    <div id="line_center_diagram"></div>
                  </dv-border-box-8>
                </div>
              </el-col>
              <!-- 第三列 -->
              <el-col :span="6">
                <!-- 轮播排行榜部分 -->
                <div class="right_box1">
                  <dv-border-box-12>
                    <dv-decoration-7 style="width: 100%; height: 30px">
                      排 行 榜</dv-decoration-7>
                    <dv-scroll-ranking-board :config="config" style="width: 95%; height: 87%; margin-left: 2%" />
                  </dv-border-box-12>
                </div>
                <!-- 虚线柱状图部分 -->
                <div class="right_box2">
                  <dv-border-box-12 :reverse="true">
                    <div id="dotter_bar"></div>
                  </dv-border-box-12>
                </div>
                <!-- 部分 -->
                <div class="right_box3">
                  <dv-border-box-12 :reverse="true">
                    <dv-conical-column-chart :config="cone" class="cone_box" />
                  </dv-border-box-12>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import {
  getSafeIpListTop5_Api, //上月攻击者IP，地址top5
  getSafeTypeTop5_Api, //上月威胁类型top5
  getSafeAddressTop5_Api, //上月威胁地点top5
  getSafeTypeList_Api, //上月威胁类型列表
  getSafeTypePercentage_Api, //上月威胁类型百分比
  getSafeChangeSum_Api, //上月威胁等级数量
  getSafeAddressList_Api, //上月威胁地点列表
  getSafeChangeList_Api, //上周威胁等级列表,
} from "@/api/DataSecurity/DataSecurity";
import drawMixin from "@/utils/drawMixin"; //自适应缩放
import { formatTime1 } from "@/utils/index.js"; //日期格式转换
import * as echarts from "echarts";
export default {
  mixins: [drawMixin],
  data() {
    return {
      //定时器
      timing: null,
      //loading图
      loading: true,
      //时分秒
      dateDay: null,
      //年月日
      dateYear: null,
      //周几
      dateWeek: null,
      //周几
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      //轮播排行榜
      config: {
        data: [],
      },
      //左侧轮播表格配置项
      board_info: {
        header: ["攻击者地址", "攻击者IP", "攻击数量"],
        data: [],
        evenRowBGC: "#020308",
        oddRowBGC: "#382B47",
        headerBGC: "#020308",
      },
      // 定义颜色
      colorList: {
        linearYtoG: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#f5b44d",
            },
            {
              offset: 1,
              color: "#28f8de",
            },
          ],
        },
        linearGtoB: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#43dfa2",
            },
            {
              offset: 1,
              color: "#28f8de",
            },
          ],
        },
        linearBtoG: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#1c98e8",
            },
            {
              offset: 1,
              color: "#28f8de",
            },
          ],
        },
        areaBtoG: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(35,184,210,.2)",
            },
            {
              offset: 1,
              color: "rgba(35,184,210,0)",
            },
          ],
        },
      },
      //锥形柱状图
      cone: {
        data: [
          // {
          //   value: 382,
          //   id: "cccfe07f-802d-4510-9b53-388faf6533d9",
          //   name: "远控木马",
          // },
          // {
          //   value: 120,
          //   id: "d1a0a91d-955b-4ebd-81ea-6058bdf8712b",
          //   name: "其它类情报命中",
          // },
          // {
          //   value: 83,
          //   id: "485640e1-5817-4823-bb8b-e18bfe850633",
          //   name: "窃密木马",
          // },
          // {
          //   value: 42,
          //   id: "8c3a03e2-e85f-4989-b89a-6535ee3130b9",
          //   name: "隐蔽信道",
          // },
          // {
          //   value: 27,
          //   id: "e6ae9619-66b1-412a-9b29-ff6ecea5fde2",
          //   name: "审计事件",
          // },
        ],
        showValue: true,
      },
      //中间上面柱状图
      center_up: {
        xAxis: [],
        data: [],
      },
      //中间下面柱状图
      center_down: {
        xAxis: [],
        data: [],
      },
      //玫瑰饼图
      Rose_diagramData: [],
      //上月威胁等级数量
      line_center_diagramData: {},
      //上月威胁地点列表
      countryData: [],
      countrynumData: [],
      columnarTotal: "",
      //上周威胁等级列表
      dotter_barTime: [],
      lowNum: [],
      middleNum: [],
      highNum: [],
      crisisNum: [],
    };
  },
  created() {
    //上月威胁类型列表
    this.getSafeTypeList();
    //上月威胁地点top5
    this.getSafeAddressTop5();
    //上月威胁类型top5
    this.getSafeTypeTop5();
    //上月攻击者IP，地址top5
    this.getSafeIpListTop5();
    this.getSafeTypePercentage();
    this.getSafeChangeSum();
    this.getSafeAddressList();
    this.getSafeChangeList();
  },

  mounted() {
    //获取实时时间
    this.timeFn();
    //加载loading图
    this.cancelLoading();
  },
  beforeDestroy() {
    //离开时删除计时器
    clearInterval(this.timing);
  },
  methods: {
    //上月攻击者IP，地址top5
    getSafeIpListTop5() {
      getSafeIpListTop5_Api().then((res) => {
        if (res.rows.length) {
          const tempArr = res.rows.map((item) => {
            return [item.attackSource, item.attackIp, item.num];
          });
          this.board_info.data = tempArr;
          //更新
          this.board_info = { ...this.board_info };
        }
      });
    },
    //上月威胁类型top5
    getSafeTypeTop5() {
      getSafeTypeTop5_Api().then((res) => {
        if (res.rows.length) {
          this.center_up.xAxis = res.rows.map((item) => item.name);
          this.center_up.data = res.rows.map((item) => item.num);
          //更新
          this.center_up = { ...this.center_up };
        }
        this.$nextTick(() => {
          //中间柱状图
          this.china_map();
        })
      });

    },
    //上月威胁地点top5
    getSafeAddressTop5() {
      getSafeAddressTop5_Api().then((res) => {
        if (res.rows.length) {
          this.center_down.xAxis = res.rows.map((item) => item.country);
          this.center_down.data = res.rows.map((item) => item.num);
          this.center_down = { ...this.center_down };
        }
        this.$nextTick(() => {
          //中间柱状图
          this.address();
        })
      });

    },
    //上月威胁类型列表
    getSafeTypeList() {
      getSafeTypeList_Api().then((res) => {
        this.config.data = res.rows.map((item) => {
          return { name: item.name, value: item.num };
        });
        this.cone.data = this.config.data;
        this.config = { ...this.config };
        this.cone = { ...this.cone };
      });
    },
    //上月威胁类型百分比
    getSafeTypePercentage() {
      getSafeTypePercentage_Api().then((res) => {
        const tempArr = res.data.ngsocTypes.map((item) => {
          return { name: item.name, value: item.num };
        });
        this.Rose_diagramData = [...tempArr];
        this.$nextTick(() => {
          //左侧玫瑰饼图
          this.Rose_diagram();
        })
      });

    },
    //上月威胁等级数量
    getSafeChangeSum() {
      getSafeChangeSum_Api().then((res) => {
        const tempObj = res.data;
        this.line_center_diagramData = { ...tempObj };
        this.$nextTick(() => {
          //中间折线图
          this.line_center_diagram();
        })
      });


    },
    //上月威胁地点列表
    getSafeAddressList() {
      getSafeAddressList_Api().then((res) => {
        const countryArr = res.rows.map((item) => {
          if (item.country == null || item.num == null) {
            return ""
          } else {
            return item.country
          }

        });
        const numArr = res.rows.map((item) => {
          if (item.country == null || item.num == null) {
            return 0
          } else {
            return item.num
          }

        });
        this.columnarTotal = res.total;
        this.countryData = [...countryArr];
        this.countrynumData = [...numArr];
        this.$nextTick(() => {
          //中间下柱状图
          this.columnar();
        })
      });


    },
    //上周威胁等级列表,
    getSafeChangeList() {
      getSafeChangeList_Api().then((res) => {
        const tempArr1 = res.rows.map((item) => {
          if (item.time == null ||
            item.lowNum == null ||
            item.middleNum == null ||
            item.highNum == null ||
            item.crisisNum == null
          ) {
            return ""
          }
          else {
            return this.timestampToTime(item.time);
          }
        });
        const tempArr2 = res.rows.map((item) => {
          if (item.time == null ||
            item.lowNum == null ||
            item.middleNum == null ||
            item.highNum == null ||
            item.crisisNum == null) {
            return 0
          }
          else {
            return item.lowNum;
          }
        });
        const tempArr3 = res.rows.map((item) => {
          if (item.time == null ||
            item.lowNum == null ||
            item.middleNum == null ||
            item.highNum == null ||
            item.crisisNum == null) {
            return 0
          } else {
            return item.middleNum;
          }
        });
        const tempArr4 = res.rows.map((item) => {
          if (item.time == null ||
            item.lowNum == null ||
            item.middleNum == null ||
            item.highNum == null ||
            item.crisisNum == null) {
            return 0
          } else {
            return item.highNum;
          }
        });
        const tempArr5 = res.rows.map((item) => {
          if (item.time == null ||
            item.lowNum == null ||
            item.middleNum == null ||
            item.highNum == null ||
            item.crisisNum == null) {
            return 0
          } else {
            return item.crisisNum;
          }
        });
        this.dotter_barTime = [...tempArr1];
        this.lowNum = [...tempArr2];
        this.middleNum = [...tempArr3];
        this.highNum = [...tempArr4];
        this.crisisNum = [...tempArr5];
        console.log(this.dotter_barTime);
        this.$nextTick(() => {
          //右侧折线图
          this.dotter_bar();
        })
      });

    },

    //右上角当前日期时间显示：每一秒更新一次最新时间
    timeFn() {
      this.timing = setInterval(() => {
        //获取当前时分秒
        this.dateDay = formatTime1(new Date(), "HH: mm: ss");
        //获取当前年月日
        this.dateYear = formatTime1(new Date(), "yyyy-MM-dd");
        //获取当前周几
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },

    //loading图
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    //中间上面柱状图
    china_map() {
      //上面
      let mapChart = this.$echarts.init(document.getElementById("up")); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
      let option = {
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.center_up.xAxis,
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
        },
        series: [
          {
            data: this.center_up.data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      option && mapChart.setOption(option); //生成图表



    },
    //下面
    address() {
      let mapChart_down = this.$echarts.init(document.getElementById("down")); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart_down.resize; //如果容器变大小，自适应从新构图
      let option_down = {
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.center_down.xAxis,
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
        },
        series: [
          {
            data: this.center_down.data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            color: "#ffdb5c",
          },
        ],
      };
      option_down && mapChart_down.setOption(option_down); //生成图表
    },
    //上月威胁类型百分比
    Rose_diagram() {
      let mapChart = this.$echarts.init(
        document.getElementById("Rose_diagram")
      ); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
      let option = {
        title: {
          text: "威胁类型",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          icon: "circle",
          bottom: 0,
          x: "center",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: "bolder",
                  },
                },
                labelLine: {
                  lineStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            data: this.Rose_diagramData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      mapChart.setOption(option); //生成图表
    },
    //上月威胁地点列表
    columnar() {
      let mapChart = this.$echarts.init(document.getElementById("line_center_diagram")); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
      let option = {
        tooltip: {},
        xAxis: {
          type: 'category',
          data: this.countryData,
          "axisLabel": {
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false },
        },
        series: [
          {
            data: this.countrynumData,
            type: 'bar',
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      mapChart.setOption(option); //生成图表
    },
    //上月威胁等级数量
    line_center_diagram() {
      let mapChart = this.$echarts.init(
        document.getElementById("columnar")
      ); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
      let option = {
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["低危数量", "中危数量", "高危数量", "危急数量"],
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
        },
        series: [
          {
            data: [
              this.line_center_diagramData.lowNum,
              this.line_center_diagramData.midNum,
              this.line_center_diagramData.highNum,
              this.line_center_diagramData.crisNum,
            ],
            type: "bar",
          },
        ],
      };
      mapChart.setOption(option); //生成图表
    },
    //右侧折线图
    dotter_bar() {
      let mapChart = this.$echarts.init(document.getElementById("dotter_bar")); //图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
      // Generate data
      let option = {
        title: {
          text: "危险等级",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dotter_barTime,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
        },
        series: [
          {
            name: "低危",
            type: "line",
            stack: "Total",
            data: this.lowNum,
          },
          {
            name: "中危",
            type: "line",
            stack: "Total",
            data: this.middleNum,
          },
          {
            name: "高危",
            type: "line",
            stack: "Total",
            data: this.highNum,
          },
          {
            name: "危急",
            type: "line",
            stack: "Total",
            data: this.crisisNum,
          },
        ],
      };
      mapChart.setOption(option); //生成图表
    },
    timestampToTime(timestamp) {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return M + D;
    },
  },
};
</script>
  
<style lang="scss" scoped >
//全局样式部分！！！！
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  outline: none;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

a {
  color: #343440;
  text-decoration: none;
}

//--------------------------------------------

//页面样式部分！！！！
#index {
  color: #d3d6dd;
  width: 100%;
  height: calc(100vh - 95px);
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
  // transform-origin: left top;
  overflow: hidden;

  .bg {
    //整体页面背景
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../../assets/pageBg.png"); //背景图
    background-size: cover; //背景尺寸
    background-position: center center; //背景位置
  }

  //顶部右边装饰效果
  .title_left {
    width: 100%;
    height: 50px;
  }

  //顶部左边装饰效果
  .title_right {
    width: 100%;
    height: 50px;
    margin-top: 18px;
  }

  //顶部中间装饰效果
  .title_center {
    width: 100%;
    height: 50px;
  }

  //顶部中间文字数据可视化系统
  .title_text {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-top: 14px;
    color: #008cff;
  }

  //时间日期
  .title_time {
    text-align: center;
  }

  //中国地图
  #china-map {
    height: 660px;
    width: 100%;

    #up {
      height: 330px;
      width: 100%;
    }

    #down {
      height: 330px;
      width: 100%;
    }
  }

  //中间折线图
  .line_center {
    width: 100%;
    height: 288px;
  }

  //左1模块
  .left_box1 {
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }

  //左2模块
  .left_box2 {
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
  }

  //左3模块
  .left_box3 {
    height: 310px;
    width: 100%;
  }

  //右1模块
  .right_box1 {
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
  }

  //右2模块
  .right_box2 {
    height: 310px;
    width: 100%;
    margin-bottom: 10px;
  }

  //右3模块
  .right_box3 {
    height: 310px;
    width: 100%;
  }

  //左1模块-玫瑰饼图
  #Rose_diagram {
    height: 310px;
    width: 100%;
    padding: 10px;
  }

  //左1模块-圆环图
  .left_box1_rose_right {
    height: 85%;
    width: 55%;
    position: absolute;
    right: 0;
    top: 0;
  }

  //左1模块-文字部分
  .rose_text {
    display: inline-block;
    margin-top: 4%;
    margin-left: 4%;
  }

  // 左1模块-￥符号样式
  .coin {
    font-size: 20px;
    color: #ffc107;
  }

  //左1模块-（件）样式
  .colorYellow {
    color: yellowgreen;
  }

  //左1模块-数字样式
  .rose_text_nmb {
    font-size: 20px;
    color: #00b891;
  }

  //左2模块 柱状图
  #columnar {
    height: 97%;
    width: 95%;
    margin-left: 3%;
    margin-top: 5px;
  }

  //折线图
  #line_center_diagram {
    height: 100%;
    width: 100%;
  }

  //轮播表格
  .carousel_list {
    width: 96%;
    height: 98%;
    margin-left: 10px;
  }

  //虚线柱状图
  #dotter_bar {
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  //锥形图
  .cone_box {
    width: 95%;
    height: 97%;
    margin-left: 3%;
  }
}
</style>
  
  